<template>
	<view>
		<uni-swiper-dot :info="imgLogList" :current="cur" :dotsStyles="dotsStyles" field="id" mode="nav" class="swiper-box">
			<swiper class="swiper-box" @change="change" autoplay="false" circular="true">
				<swiper-item v-for="(item ,index) in imgLogList" :key="index">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="" class="goods-img"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- <image :src="d.imgLogo" class="goods-img">

		</image> -->
		<view class="info-box">
			<view class="title">
				{{d.name}}
			</view>
			<view class="info">
				规格：{{d.specificationName}}
			</view>
			<view class="info">
				售卖价格：{{d.price}}元
			</view>
			<view class="info">
				租赁价格：{{d.rentPrice}}元/天
			</view>
			<view class="info">
				押金：{{d.depositPrice}}元
			</view>
			<view class="info" v-if="d.typeId ==1">
				商品类型：可售卖
			</view>
			<view class="info" v-if="d.typeId ==2">
				商品类型：可租赁
			</view>
			<view class="info" v-if="d.typeId ==3">
				商品类型：可租赁，可售卖
			</view>
		</view>
		<view class="pick-box">
			<view class="picker row" @click="open">
				<view class="title-bar">
					<text class="title">规格</text>
					<text class="value">请选择规格</text>

				</view>
				<view class="arrow-right"></view>
			</view>
		</view>
		<view class="intruduction-box">
			<view class="title-bar" style="margin-bottom: 30rpx;">
				商品介绍
			</view>
			<!-- <view class="" v-for="(item,index) in d.imgLogList" :key="index">
				<image :src="item.imgUrl" mode=""></image>
			</view>
			 -->
			<view class="desc">
				<rich-text :nodes="content"></rich-text>
				<!-- {{d.detailsInfo}} -->
			</view>
		</view>
		<view class="footer center">
			<view class="btn" v-if="flag" @click="open">
				创建订单
			</view>
			<!-- <view class="btn" v-else @click="open">
				添加商品
			</view> -->
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrap">
				<scroll-view scroll-y="true" style="height:1000rpx;">
					<view class="close-icon" @click="close()">
						<image src="../../static/img/gb.png" mode=""></image>
					</view>
					<view class="title">
						规格选择
					</view>
					<view class="" v-for="(item,index) in goodsSpecificationList" :key="index">
						<view class="sc-title">
							{{item.name}}
						</view>
						<view class="color-box row">
							<view :class="['color-item',item.cur == it.id ? 'active':'']" v-for="(it,idx) in item.goodsSpecificationValuesList"
							 :key="idx" @click="changeGui(index,item.name,it.id,it.name)">
								{{it.name}}
							</view>
						</view>
					</view>
					<view class="sc-title">
						搭配商品
					</view>
					<view class="good-box row">
						<view :class="['good-item column',idx == item.id ? 'active':'']" v-for="(item,index) in goodList" :key="index"
						 @click="changegood(index,item.id)">
							<view class="name">
								{{item.goodsName}}
							</view>
							<view class="desc">
								售卖价格：{{item.price}}元
							</view>
							<view class="desc">
								租赁价格：{{item.rentPrice}}元/天
							</view>
							<view class="desc">
								押金：{{item.depositPrice}}
							</view>
							<uni-number-box @change="bindNum($event,index)" :value="item.num" :min="1"></uni-number-box>
						</view>
					</view>
					<view class="amount-bar row">
						<text>数量</text>
						<uni-number-box @change="bindChange" :value="num" :min="1"></uni-number-box>
					</view>
					<view class="popup-footer row" v-if="flag">
						<view class="btn1" @click="rent(id)">
							租赁
						</view>
						<view class="btn2" @click="buy(id)">
							购买
						</view>
					</view>
					<view class="popup-footer row" v-else>
						<view class="btn3">
							添加
						</view>
					</view>
				</scroll-view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			uniPopup,
			uniNumberBox
		},
		data() {
			return {
				cur:0,
				isCompany:0,
				imgLogList: [{id:""}],
				content: "",
				id: "",
				flag: true,
				goodsSpecificationList: [],
				d: {},
				goodsSkuList: [],
				size: '',
				goodList: [],
				idx: -1,
				num: 1,
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 5,
					border: "1px rgba(0, 0, 0, 0) solid",
					selectedBorder: "1px rgba(0, 0, 0, 0) solid",
					selectedBackgroundColor: "#C3C3C3",
					color: "#EBEBEB",
				},
				indexList: [],
				skugoods: {},
				skuId: '',
				goodsId: "",
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getData()
		},
		methods: {
			change(e){
				this.cur = e.detail.current
			},
			getData() {
				let data = {
					id: this.id
				}
				comm.request("POST", "/app/goods/getGoodsInfo", data, (res, data) => {
					console.log("商品详情", res)
					if (res.data.ret_code == 200) {
						let imgLogList = data.imgLogList;
						imgLogList.forEach(e => {
							e.id = ''
						})
						let goodsSpecificationList = data.goodsSpecificationList
						goodsSpecificationList.forEach(e => {
							e.cur = -1
						})
						this.goodsSpecificationList = goodsSpecificationList
						this.imgLogList = imgLogList;
						this.d = data
						this.goodsSkuList = data.goodsSkuList
						let matchGoodsList = data.matchGoodsList
						matchGoodsList.forEach(e => {
							e.num = 1
						})
						this.goodList = matchGoodsList
						let content = data.detailsInfo.replace(
							/\<img/gi,
							'<img style="max-width:100%;height:auto" ')
						this.content = content
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
				comm.request("POST", "/app/member/getInfo", {}, (res, data) => {
					console.log("个人信息", res)
					if (res.data.ret_code == 200) {
							this.isCompany = data.isCompany
					}
				})
			},
			//选择规格
			changeGui(index, name, id, valueName) {
				this.goodsSpecificationList[index].cur = id;
				let indexList = this.indexList;
				let flag = false;
				let obj = {
					name: name,
					id: id,
					valueName: valueName,
				}
				if (indexList.length != 0) {
					indexList.forEach(e => {
						if (e.name == obj.name) {
							console.log("走这里", e)
							e.id = obj.id;
							e.valueName = obj.valueName
							flag = true
						}
					})
				}
				if (!flag) {
					indexList.push(obj)
				}
				console.log(indexList, "=========", flag)
				this.indexList = indexList
			},
			//选择搭配商品
			changegood(index, id) {
				this.goodsId = index
				this.idx = id
			},
			//数量
			bindChange(e) {
				this.num = e;
			},
			//选择搭配商品数量
			bindNum(e, index) {
				this.goodList[index].num = e
			},
			//租赁
			rent(id) {
				// if(this.isCompany == 0){
				// 	comm.showToast("请先绑定公司","none")
				// 	comm.navigateTo(r.bindUnit)
				// 	return
				// }
				if (this.d.typeId == 1) {
					comm.showToast("该商品只售卖不出租", "none")
					return
				}
				let list = []
				this.indexList.forEach(e => {
					list.push(e.id)
				})
				let flag = false
				this.goodsSkuList.forEach(e => {
					let indexes = e.indexes.replace(/\s*/g, "");
					if (indexes == JSON.stringify(list)) {
						flag = true
						this.skuId = e.id
						this.skugoods = e
					}
				})
				if (!flag) {
					comm.showToast("请选择规格", "none")
				} else {
					let obj = {
						// spec:JSON.stringify(list),
						depositPrice: this.skugoods.depositPrice,
						rentPrice: this.skugoods.rentPrice,
						expressFee: this.skugoods.expressFee,
						skuId: this.skuId,
						// skugoods:this.skugoods,
						num: this.num,
						goods: this.goodList[this.goodsId],
						imgUrl: this.d.imgLogo,
						name: this.d.name,
						siteName: this.d.siteName,
						roadName: this.d.roadName
					}
					this.close()
					comm.navigateTo(r.createOrder + "?id=" + id + "&type=rent" + "&obj=" + JSON.stringify(obj))
				}
			},
			//购买
			buy(id) {
				// if(this.isCompany == 0){
				// 	comm.showToast("请先绑定公司","none")
				// 	comm.navigateTo(r.bindUnit)
				// 	return
				// }
				if (this.d.typeId == 2) {
					comm.showToast("该商品只出租不售卖", "none")
					return
				}
				let list = []
				this.indexList.forEach(e => {
					list.push(e.id)
				})
				let flag = false
				this.goodsSkuList.forEach(e => {
					let indexes = e.indexes.replace(/\s*/g, "");
					if (indexes == JSON.stringify(list)) {
						flag = true
						this.skuId = e.id
						this.skugoods = e
					}
				})
				if (!flag) {
					comm.showToast("请选择规格", "none")
				} else {
					let obj = {
						price: this.skugoods.price,
						expressFee: this.skugoods.expressFee,
						skuId: this.skuId,
						// skugoods:this.skugoods,
						num: this.num,
						goods: this.goodList[this.goodsId],
						imgLogo: this.d.imgLogo,
						name: this.d.name,
						siteName: this.d.siteName,
						roadName: this.d.roadName
					}
					this.close()
					comm.navigateTo(r.createOrder + "?id=" + id + "&type=buy" + "&obj=" + JSON.stringify(obj))
				}

				// if(this.current == -1){
				// 					comm.showToast("请选择颜色","none")
				// 				}else if(this.idx == -1){
				// 					comm.showToast("请选择尺寸","none")
				// 				}else{
				// 					this.close()
				// 					comm.navigateTo(r.createOrder+"?id="+id+"&type=buy")
				// 				}
			},
			open() {
				this.$refs.popup.open()
			},

			close() {
				this.$refs.popup.close()
			}
		},
	}
</script>

<style lang="less">
	.swiper-box {
		width: 100%;
		height: 750rpx;
	}

	.goods-img {
		width: 100%;
		height: 750rpx;
		background-color: #E5E5E5;
	}

	.info-box {
		padding: 40rpx 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 10rpx;
		}

		.info {
			font-size: 22rpx;
			color: rgba(153, 153, 153, 1);
			line-height: 47rpx;
		}
	}

	.pick-box {
		border-top: 16rpx solid #FBF8FB;
		border-bottom: 16rpx solid #FBF8FB;
		padding: 30rpx;

		.picker {
			justify-content: space-between;

			.title-bar {
				.title {
					font-size: 28rpx;
					color: rgba(153, 153, 153, 1);
					margin-right: 30rpx;
				}

				.value {
					font-size: 28rpx;
					color: rgba(51, 51, 51, 1);
				}
			}

			.arrow-right {
				width: 15rpx;
				height: 15rpx;
				border-right: 5rpx solid #E3E2E2;
				border-bottom: 5rpx solid #E3E2E2;
				transform: rotate(-45deg);
			}
		}
	}

	.intruduction-box {
		padding: 30rpx;
		padding-bottom: 120rpx;

		.title-bar {
			padding-left: 30rpx;
			position: relative;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
		}

		.title-bar::before {
			content: '';
			display: block;
			width: 7rpx;
			height: 24rpx;
			background: rgba(51, 51, 51, 1);
			border-radius: 8rpx;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -12rpx;
		}

		image {
			width: 100%;
			height: 330rpx;
			border-radius: 20rpx;
			background-color: #E5E5E5;
			margin: 30rpx 0;
		}

		.desc {
			font-size: 24rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 40rpx;
		}
	}

	.footer {
		width: 100%;
		height: 101rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		box-shadow: 0rpx 6rpx 11rpx 0rpx rgba(0, 0, 0, 0.04);
		background-color: #FFFFFF;
		z-index: 9;

		.btn {
			width: 266rpx;
			height: 69rpx;
			background: rgba(217, 48, 17, 1);
			border-radius: 35rpx;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 69rpx;
		}
	}

	.popup-wrap {
		padding: 30rpx 0;
		padding-bottom: 0;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		z-index: 99;

		.close-icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.title {
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 38rpx;
		}

		.sc-title {
			margin: 30rpx 30rpx;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
		}

		.color-box,
		.size-box,
		.good-box {
			margin-left: 30rpx;
			flex-wrap: wrap;

			.color-item,
			.size-item {
				background: rgba(246, 245, 245, 1);
				border-radius: 10rpx;
				padding: 10rpx 40rpx;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				font-size: 24rpx;
				color: rgba(51, 51, 51, 1);
			}

			.size-item {
				padding: 10rpx 26rpx;
			}

			.good-item {
				background: rgba(246, 245, 245, 1);
				border-radius: 10rpx;
				padding: 10rpx 26rpx;
				margin-right: 15rpx;
				margin-bottom: 15rpx;

				color: #666666;

				.name {
					font-size: 24rpx;
					margin-bottom: 10rpx;
				}

				.desc {
					font-size: 18rpx;
					margin-bottom: 10rpx;
				}
			}

			.active {
				border: 1rpx solid #D93011;
				color: #D93011;
			}
		}

		.uni-numbox__minus,
		.uni-numbox__value,
		.uni-numbox__plus {
			height: 50rpx !important;
		}

		.amount-bar {
			justify-content: space-between;
			margin: 20rpx 30rpx;

			text {
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}
		}

		.popup-footer {
			padding: 30rpx;
			box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
			color: #FFFFFF;
			justify-content: center;

			.btn1 {
				flex: 1;
				background: #FD7407;
				border-radius: 40rpx 0 0 40rpx;
				text-align: center;
				padding: 26rpx 0;
			}

			.btn2 {
				flex: 1;
				border-radius: 0 40rpx 40rpx 0;
				background: rgba(217, 48, 17, 1);
				text-align: center;
				padding: 26rpx 0;
			}

			.btn3 {
				width: 345rpx;
				background: rgba(217, 48, 17, 1);
				border-radius: 40rpx;
				text-align: center;
				padding: 26rpx 0;
			}
		}
	}
</style>
